<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>认识jquery</title>
    <!--
        js存在的问题:
        1. 浏览器兼容问题
        2. 存在复杂的dom操作
        3. 复杂的特效和动画的实现
        4. 请求网络数据存在跨域问题

        jquery优势:
        1. 不存在浏览器兼容问题
        2. 轻松实现dom操作和特效动画
        3. 多方式的网络请求方案
    -->
</head>
<body>
    <div id="test">
        <div class="word">
            <p>我是一段文字</p>
            <p>我是一段文字</p>
            <p>我是一段文字</p>
            <p>我是一段文字</p>
        </div>
        <div class="pic">
            <img src="imgs/1.jpg">
            <img src="imgs/1.jpg">
            <img src="imgs/1.jpg">
            <img src="imgs/1.jpg">
        </div>

        <button>显示</button>
        <button>隐藏</button>
        <button>切换</button>
    </div>

    <!--引用jquery-->
    <script src="js/jquery-3.2.1.js"></script>
    <script>
        // 1. $() -----> 就是一个jquery对象
        // 2. 拿到对应的标签
        console.log($('#test .word'));
        $('p');

        // 3. 查看拿到的标签中的属性值
        console.log($('.word').attr('class'));

        // 4. 改变拿到的标签的属性值
        $('img').attr('src', 'imgs/2.jpg');
        $('img').attr({src: 'imgs/3.jpg'});
        $('img').attr({width: '300px'});

        // 5. 查看标签中的内容
        console.log($('p').text())
        console.log($('#test').html())

        // 6. 改变标签中的内容
        $('p').text('我是MT')

        // 7. 事件
        // 显示
        $('button').eq(0).on('click', function () {
            $('p').show()
            $('img').show()
        })
        // 隐藏
        $('button').eq(1).on('click', function () {
            $('p').hide()
            $('img').hide()
        })
        // 切换
        $('button').eq(2).on('click', function () {
            $('p').toggle(200)
            $('img').toggle(200)
        })

        // 8. 遍历
        var data = [11, 22, 33, 44, 55, 66, 77, 88, 99, 88];
        $.each(data, function (index, value) {
            console.log(index, value);
        })

        // 9.取出对应下标
        console.log($.inArray(88, data));

        // 10. 写CSS
        $('.word').css({
            background: 'red'
        })

    </script>
</body>
</html>